<template>
  <div class="seach-box Hsearch">
    <div class="select-box-content onee">
      <el-select v-model="year" class="year" @change="yearChange">
        <el-option
          v-for="item in yearList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-if="reportType === 'month'"
        v-model="monthObj"
        class="month"
        value-key="startDate"
        placeholder="月报"
        @change="getTimeObj($event,'obj')"
      >
        <el-option
          v-for="item in monthList"
          :key="item.startDate"
          :label="'第' + item.name + '('+ item.startDate + '~' + item.endDate + ')'"
          :value="item"
        />
      </el-select>
      <el-select
        v-if="reportType === 'week'"
        v-model="weekObj"
        class="week"
        value-key="startDate"
        placeholder="周报"
        @change="getTimeObj($event,'obj')"
      >
        <el-option
          v-for="item in weekList"
          :key="item.startDate"
          :label="'第' + item.name + '('+ item.startDate + '~' + item.endDate + ')'"
          :value="item"
        />
      </el-select>
      <el-date-picker
        v-if="reportType === 'day'"
        v-model="nowDay"
        class="one"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="日报"
        @change="getTimeObj($event,'params')"
      />
      <template v-for="item,index in headSearchData">
        <el-select
          v-if="item.type === 'select'"
          :key="index"
          v-model="queryData[item.value]"
          class="one"
          :placeholder="item.placeholder"
          clearable
        >
          <el-option
            v-for="element,idx in item.optionsData"
            :key="idx"
            :label="element.name"
            :value="element.value"
          />
        </el-select>
        <el-date-picker
          v-if="item.type === 'dateSelect'"
          :key="index"
          v-model="queryData[item.value]"
          class="one"
          type="date"
          value-format="yyyy-MM-dd"
          :placeholder="item.placeholder"
        />
      </template>
    </div>
    <div class="select-box-content two">
      <el-button
        :type="reportType === 'day' ? 'primary' :''"
        @click="changeReportType('day')"
      >日</el-button>
      <el-button
        :type="reportType === 'week' ? 'primary' :''"
        @click="changeReportType('week')"
      >周</el-button>
      <el-button
        :type="reportType === 'month' ? 'primary' :''"
        @click="changeReportType('month')"
      >月</el-button>
    </div>
    <div class="select-box-content three">
      <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
      <el-button icon="el-icon-refresh" @click="reloads">重置</el-button>
      <el-button icon="el-icon-mouse" @click="$emit('exportData')">导出</el-button>
    </div>
  </div>
</template>

<script>
import { AllYears, AllMonths, AllWeeks } from "@/utils/validate";
import { month, week } from "./time";
export default {
  inject: ["reload"],
  name: "ReportSearch",
  props: {
    headSearchData: {
      type: Array,
      default: () => []
    },
    queryList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      reportType: "month",
      year: "",
      yearList: [],
      monthObj: "",
      monthList: [],
      weekObj: "",
      weekList: [],
      nowDay: this.dateToFormattwo(new Date()),
      queryData: {}
    };
  },
  computed: {},
  watch: {
    queryList(val) {
      this.queryData = { ...val };
    }
  },
  mounted() {
    this.AllYear();
  },
  methods: {
    changeReportType(e) {
      this.reportType = e;
      this.yearChange(this.yearList[0].value);
      this.$emit("reportType", this.reportType);
    },
    search() {
      this.$emit("queryCondition", this.queryData);
    },
    reloads() {
      this.reload();
    },
    AllYear() {
      this.yearList = AllYears();
      this.year = this.yearList[0].value;
      this.yearChange(this.yearList[0].value);
    },
    yearChange(e) {
      if (this.reportType === "month") {
        this.monthList = AllMonths(e);
        if (
          this.monthList.findIndex(
            item => item.startDate === month().startDate
          ) !== -1
        ) {
          this.monthObj = month();
          let time = this.changeTimeType(
            this.monthObj.startDate,
            this.monthObj.endDate
          );
          this.queryData = { ...this.queryData, ...time };
          this.search();
        } else {
          this.monthObj = this.monthList[0];
          let time = this.changeTimeType(
            this.monthObj.startDate,
            this.monthObj.endDate
          );
          this.queryData = { ...this.queryData, ...time };
          this.search();
        }
      }
      if (this.reportType === "week") {
        this.weekList = AllWeeks(e);
        if (
          this.weekList.findIndex(
            item => item.startDate === week().startDate
          ) !== -1
        ) {
          this.weekObj = week();
          let time = this.changeTimeType(
            this.weekObj.startDate,
            this.weekObj.endDate
          );
          this.queryData = { ...this.queryData, ...time };
          this.search();
        } else {
          this.weekObj = this.weekList[0];
          let time = this.changeTimeType(
            this.weekObj.startDate,
            this.weekObj.endDate
          );
          this.queryData = { ...this.queryData, ...time };
          this.search();
        }
      }
      if (this.reportType === "day") {
        let a = new Date();
        let b = a.getFullYear();
        if (b === e) {
          let time = this.changeTimeType(this.nowDay, this.nowDay);
          this.queryData = { ...this.queryData, ...time };
          this.search();
        } else {
          this.nowDay = `${e}-01-01`;
          let time = this.changeTimeType(this.nowDay, this.nowDay);
          this.queryData = { ...this.queryData, ...time };
          this.search();
        }
      }
    },
    getTimeObj(event, type) {
      if (type === "obj") {
        let time = this.changeTimeType(event.startDate, event.endDate);
        this.queryData = { ...this.queryData, ...time };
        this.search();
      } else {
        let time = this.changeTimeType(event, event);
        this.queryData = { ...this.queryData, ...time };
        this.search();
      }
    },
    changeTimeType(startDate, endDate) {
      let a = startDate + " 00:00:00";
      let b = endDate + " 23:59:59";
      return { startTime: a, endTime: b };
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.Hsearch {
  position: relative;
  display: flex;
  .onee {
    .year {
      width: 100px;
    }
    .month {
      width: 270px;
      margin-right: 20px;
    }
    .week {
      margin-right: 20px;
      width: 270px;
    }
    .one {
      margin-right: 20px;
    }
  }
  .two {
    //
    margin-right: 20px;
  }
  .three {
    position: absolute;
    right: 0px;
  }
}
</style>
